<template>
  <!--用户个人信息页面  -->
  <div id="Personal">
    <!-- 搜索部分 -->
    <!-- 头部导航 -->
    <van-nav-bar fixed>
      <template #left>
        <!-- <i class="iconfont icon-jiahao" size="16" /> -->
        <router-link to="register">
          退出{{ $store.state.uname.nick_name || user.name }}</router-link
        >
      </template>
      <template #title>
        <van-search
          placeholder="请输入搜索关键词"
          background="#fff"
          shape="round"
        />
      </template>
      <template #right>
        <!-- <i class="setting-o" /> -->
        <van-icon name="setting-o" />
        <!-- <i class="iconfont icon-bell" /> -->
      </template>
    </van-nav-bar>
    <!-- 个人信息 -->
    <div class="personal" style>
      <!-- 昵称，头像 -->
      <div style="display:flex;justify-content:space-between;">
        <h2 v-text="`${$store.state.uname.nick_name || user.name}`"></h2>
        <!-- 头像 -->
        <!-- <img
          style="width:100px;height:100px;border-radius:50%;"
          :src="`/img/${$store.state.uname.avatar || user.avatar}`"/> -->
          <!-- <van-uploader :after-read="afterRead" v-if="!this.$store.state.avatar">
            <van-image width="6rem" height="6rem" round src="`http://localhost:3000/unnamed.jpg`"/>
          </van-uploader> -->
          <van-uploader :after-read="afterRead">
            <van-image width="6rem" height="6rem" round :src="`http://localhost:3000/${this.$store.state.avatar}`"/>
          </van-uploader>
      </div>
      <!-- 关注 收藏 -->
      <div class="Collection" style=" ">
        <div style="margin-right:10px">
          <p>0</p>
          <p style="font-size:12px;">关注</p>
        </div>
        <div>
          <p>0</p>
          <p style="font-size:12px;">收藏</p>
        </div>
      </div>
    </div>
    <!-- 简介内容 -->
    <div class="content">
      <!-- 开通会员 -->
      <button>开通会员</button>
      <!-- 个人简介 -->
      <div>
        <!-- time 时间 -->
        <p>2021-7-18 加入</p>
        <p>添加个人简历，让厨友了解你</p>
      </div>
    </div>
    <!-- 功能部分 -->
    <!-- <div>
      <van-tabs v-model="active">
        <van-tab title="浏览历史">浏览历史 1</van-tab>
        <van-tab title="会员 2">会员 2</van-tab>
        <van-tab title="菜谱作品 3">
         
        </van-tab>
        <van-tab title="订单 4">订单 4</van-tab>
        <van-tab title="钱包 5">钱包 5</van-tab>
      </van-tabs>
    </div>-->
    <!-- 按钮组 -->
    <div class="btns">
      <div>
        <van-icon name="clock-o" />
        <p>浏览历史</p>
      </div>
      <div>
        <van-icon name="gem-o" />
        <p>会员</p>
      </div>
      <div>
        <van-icon name="chat-o" />
        <p>答疑</p>
      </div>
      <div>
        <van-icon name="cart-o" />
        <router-link style="display: block;" to="shoppingcard">购物车</router-link>
      </div>
      <div>
        <van-icon name="bill-o" />
        <p>钱包</p>
      </div>
    </div>
    <!-- 发布作品 -->
    <div>
      <van-tabs v-model="activeName">
        <van-tab style="text-align:center" title="菜谱" name="a">
          <p>创建菜谱的人是厨房里的天使</p>
          <button class="start-btn" @click="setcCongee">
            开始创建第一道菜谱
          </button>
        </van-tab>
        <van-tab title="作品" name="b">内容 2</van-tab>
      </van-tabs>
    </div>
    <myfooter></myfooter>
  </div>
</template>

<script>
import { domain } from "../a";
import {mapState, mapMutations } from 'vuex';

export default {
  data() {
    return {
      active: 2,
      activeName: "菜谱",
      user: {
        name: "用户昵称",
      },
      avata:''
    };
  },
  methods: {
    ...mapMutations(["updateAvatar"]),
    setcCongee() {
      console.log(this.uname);
      this.$router.push("/addCongee");
    },
    afterRead(file){
     // console.log(file);
      let uname=this.uname.nick_name.slice(0,-3);
      let fd=new FormData();
      fd.append("avatarFile",file.file);
      fd.append('uname',uname)
      //fd.push(uname)
      this.axios.post('/user/upload',fd)
      .then(res=>{
        //console.log(res);
        console.log(res.data.data.filename)
       this.avatar=res.data.data.filename;
       sessionStorage.setItem('avatar',this.avatar);
      //  this.avatar=sessionStorage.getItem('avatar')
       this.updateAvatar(this.avatar)
      })
    }
  },
  computed: {
     ...mapState(["uname"]),
  },
  mounted(){
    this.avata=sessionStorage.getItem("avatar")
  },
  watch:{
    avata(){
      this.avata=sessionStorage.getItem("avatar");
      this.updateAvatar(this.avata); 
    }
  }
};
</script>

<style lang="scss">
#Personal {
  // 导航搜索
  // 导航栏
  // ::v-deep .van-nav-bar #title {
  //   margin: 0 auto;
  //   max-width: 100%;
  //   width: 82%;
  // }
  // ::v-deep .van-nav-bar {
  //   z-index: 10;
  // }
  // ::v-deep .van-search {
  //   padding: 0 10px;
  // }
  // // 首页内容导航
  // ::v-deep .home-nav {
  //   margin-top: 46px;
  // }

  // 个人信息
  .personal {
    margin: 60px 30px 0px 30px;
    margin-top: 60px;
    .Collection {
      display: flex;
      border-bottom: 0.5px solid #cccccc;
      // padding-left: 30px;
      div p {
        margin: 3px !important;
      }
    }
  }
  // 简介内容
  .content {
    margin-top: 20px;
    padding-left: 30px;
    border-bottom: 0.5px solid #cccccc;
    button {
      border-radius: 15px;
      border: 0px;
      padding: 5px;
      background-color: #edd19a;
      color: #555;
    }
    div {
      font-size: 14px;
    }
  }

  // 按钮组
  .btns {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    border-bottom: 0.5px solid #cccccc;

    p {
      margin: 4px !important;
      font-size: 14px;
    }
  }
  // 开始创建内容
  .start-btn {
    border: 0;
    background-color: transparent;
    color: orange;
  }
}
</style>
